import { observer } from "mobx-react";
import { Card, Breadcrumb, Form, Button, Radio, Input, Upload, Space, Select, message } from "antd";
import { Link, useNavigate, useSearchParams } from "react-router-dom";
import agreementSDK from "@/assets/agreement-sdk/1.1.0/agreementSDK.min.js"



import "./index.scss";

const Overview = () => {

  const overViewAgreement = () => {
    message.success(`更新`);
  }


  return (
    <div className="publish">
      <Card
        title={
          <Breadcrumb separator=">">
            <Breadcrumb.Item>
              <Link to="/home">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>协议预览</Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        <div className={"content-left"}>
          <Form labelCol={{ span: 8 }} wrapperCol={{ span: 8 }} initialValues={{ type: 1, content: "" }}>
            <Form.Item label="协议编号" name="agreementNo" rules={[{ required: true, message: "请输入协议编号" }]}>
              <Input placeholder="请输入协议编号" />
            </Form.Item>
            <Form.Item label="协议版本" name="version">
              <Input placeholder="请输入协议版本" />
            </Form.Item>
            <Form.Item label="协议标题" name="title">
              <Input placeholder="请输入协议标题" />
            </Form.Item>
            <Form.Item label="协议标题" name="title">
              <Input placeholder="请输入协议标题"/>
            </Form.Item>
            <Form.Item label="确认按钮文字" name="confirmText">
              <Input placeholder="请输入确认按钮文字"/>
            </Form.Item>
            <Form.Item label="确认按钮文字颜色" name="confirmTextColor">
              <Input placeholder="确认按钮文字颜色"/>
            </Form.Item>
            <Form.Item label="确认按钮背景颜色" name="confirmBackGroundColor">
              <input type="color"/>
            </Form.Item>

            <Form.Item wrapperCol={{ offset: 4 }}>
              <Space>
                <Button size="large" type="primary" htmlType="submit" onClick={() => {
                  overViewAgreement();
                }}>
                  协议预览
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </div>
        <div className={"content-right"}>
          <iframe style={{
            backgroundColor: '#f5f5f5',
            border: 'none',
            width: '100%',
            height: '80vh',
            borderRadius: '16px'
          }}>
        </iframe>
        </div>

      </Card>
    </div>
  )
}

export default observer(Overview)
